*,
*::after,
*::before {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/*# This controls the styling for the default skin hotspots */
#container div div img, .ggdefaulthotspot {
    display: none;
}

/*# Fucking weird behaviour hiding the hotspots  */
#container div div {
    visibility: visible !important;
}

html {    
    /*? -------- Font Imports -------  */
    /** Josefin Sans  */
    @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;600&display=swap');
    /** Nunito Sans  */
    @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600&display=swap');

    /*? -------- Custom Variables -------  */
    /** Colors */
    --col-overlay-med: rgba(10, 10, 10, 0.7);
    --col-overlay-strong: rgba(10,10,10,0.9);

    --col-bg-light: #31343a;
    --col-bg-main: #1E2024;
    --col-bg-dark: hsl(240, 6%, 8%);

    --col-btn-light: #eb756d;
    --col-btn-main: #D45148;
    --col-btn-dark: #c9483f;

    --col-txt-primary: white;
    --col-txt-secondary: #1E2024;

    --col-heading-box: #FAF5F0;
    --col-faded-white: #FAF5F0;

    /* --col-temp-background-box: hsla(0, 0%, 40%, 0.5); */

    /** Font Families */
    --font-headings: 'Josefin Sans', sans-serif;
    --font-body: 'Nunito Sans', sans-serif;
    /** Font Sizes  */
    --font-sizeName: insert font-sizes here;
    /** Font Weights  */
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
}

body {
    /* color: rgba(0, 0, 0, 0.6); */
}

/*! ----------------- Main Styling Elements ---------------------- */

.body-container {
    /* background-color: rgba(180, 180, 180, 0.281); */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
    /* font-family: var(--font-body); */
    font-weight: var(--font-weight-regular);
}

.body-container * {
    pointer-events: auto;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-row-resp {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon {
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}


@media only screen and (min-width: 100px) and (max-width: 1023px) {
    .flex-row-resp {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/*! ---------------------------------------------------------------- */

/*! ------------------------ Footer Menu Section ------------------- */
.menu-container {
    background-color: var(--col-bg-main);
    width: 100vw;
    height: 100px;
    position: fixed;
    bottom: 0px;
    justify-content: space-between;
    padding: 0px 50px;
    z-index: 100;
}

/** Menu current node selection button */
.menu-current-node-button {
    background-color: var(--col-bg-dark);
    position: relative;
    width: 360px;
    height: 60px;
    border-radius: 100px;
    padding: 0px 30px;
    cursor: pointer;
    transition: all 100ms ease-in-out;
}
.menu-current-node-button:hover {
    box-shadow: inset 0px 0px 20px black;
}
.menu-current-node-button:hover .current-node-title {
    letter-spacing: 1px;
}
.tour-icon {
    background-image: url('/assets/icons/tour-icon.svg');
    width: 25px;
    height: 25px;
    margin-right: 20px;
}
.current-node-title {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 24px;
    color: var(--col-txt-primary);
    transition: all 200ms ease-in-out;
}
.icons-expand-collapse {
    background-image: url('/assets/icons/arrow-up-icon.svg');
    width: 20px;
    height: 20px;
    position: absolute;
    right: 30px;
    transition: all 500ms ease-in-out;
    transform-origin: center center;
    transform: scaleY(1);
}
.icon-node-arrow-up {
    /* background-color: rgba(0, 41, 128, 0.253); */
    /* background-image: url('/assets/icons/arrow-up-icon.svg'); */
    /* width: 20px;
    height: 20px; */
}

/** Menu tour controller elements */
.menu-control-container {
    background-color: var(--col-temp-background-box);
    /* width: 240px; */
    height: 50px;
    justify-content: space-between;
}
.control-icon {
    background-color: var(--col-bg-dark);
    width: 50px;
    height: 50px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--col-txt-primary);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
    margin: 0px 5px;
}
.c-icon-zoomIn {
    background-image: url('/assets/icons/controls/zoom-in-icon.svg');
    background-size: 48%;
}
.c-icon-zoomOut {
    background-image: url('/assets/icons/controls/zoom-out-icon.svg');
    background-size: 48%;
}
.c-icon-fullScreen {
    background-image: url(/assets/icons/controls/enter-fullScreen-icon.svg);
    border-radius: 0px !important;
    width: 24px;
    height: 24px;
    position:absolute;
    z-index: 175;
}
.c-icon-collapseScreen {
    background-image: url(/assets/icons/controls/exit-fullScreen-icon.svg);
    width: 26px;
    height: 26px;
    position:absolute;
}
.hide {
    display: none;
}

/** Menu tour title and info button */
.menu-information {
    background-color: var(--col-temp-background-box);
    /* height: 60px; */
    justify-content: space-between;
}
.tour-title-main {
    /* background-color: red; */
    flex-shrink: 1;
    font-family: var(--font-headings);
    font-weight: var(--font-weight-extralight)
    font-size: 30px;
    color: var(--col-txt-primary);
}
.button-info {
    /* Button body */
    background-color: var(--col-btn-main);
    width: 150px;
    height: 50px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
    cursor: pointer;
    transition: all 200ms ease-in-out;
    /* Button Font */
    font-family: var(--font-body);
    color: var(--col-txt-primary);
    font-size: 24px;
}
.button-info:hover {
    background-color: var(--col-btn-dark);
    transform: scale(1.02);
    box-shadow: 0px 0px 10px hsla(32, 100%, 97%, 0.2);
}


@media only screen and (min-width: 100px) and (max-width: 1023px) {
    .menu-container {
        height: 75px;
        justify-content: space-between;
        padding: 0px 13px;
    }

    .menu-current-node-button {
        width: 280px;
        height: 50px;
        border-radius: 100px;
        padding: 0px 20px;
    }
    .current-node-title {
        font-size: 20px;
    }
    .menu-control-container {
        display: none;
    }
    .menu-information {
        display: none;
    }


}

/*! ------------------------ Footer Menu End ------------------- */



/*! --------------------- Scroll Gallery Section ------------------- */
.gallery-container {
    background-color: var(--col-overlay-med);
    width: 100%;
    height: 320px;
    position: absolute;
    bottom: -230px;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    padding: 0px 10px;
    transition: all 750ms ease-in-out;
}
.gallery-container-animate {
    bottom: 90px;   
}

.gallery-node-box {
    background-color: var(--col-temp-background-box);
    width: 360px;
    height: 280px;
    justify-content: space-between;
    padding: 10px;
    flex-shrink: 0;
}

.img-gallery-thumb {
    width: 100%;
    height: 220px;
    border-radius: 20px;
    /* background: url('/images/webP/nodeimage_node1.webp'); */
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 200ms ease-in-out;
}

.img-gallery-thumb:hover {
    background-size: 105%;
    transition: all 300ms ease-in-out;    
}

.txt-gallery-title {
    background-color: var(--col-temp-background-box);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 20px;
    color: var(--col-txt-primary);
    align-self: flex-start;
    margin-left: 0px;
    user-select: none;
}


@media only screen and (min-width: 100px) and (max-width: 1023px) {
    .gallery-container {
        background-color: var(--col-overlay-strong);
        height: calc(100vh - 75px);
        top: calc(100vh - 70px);
        border-radius: 20px 20px 0px 0px;
        overflow-y: scroll;
        overflow-x: hidden;
        /* overflow: visible; */
        padding: 10px 10px;

        -ms-overflow-style: none;
        scrollbar-width: none; /* Firefox */
    }
    .gallery-container-animate {
        top: 0px;   
    }
    .gallery-container::-webkit-scrollbar {
        display: hidden;
    }
    .gallery-node-box {
        background-color: var(--col-temp-background-box);
        width: 360px;
        height: 264px;
        justify-content: space-between;
        /* align-items: center; */
        padding: 10px;
        flex-shrink: 0;
    }
    .img-gallery-thumb {
        width: 100%;
        height: 210px;
        border-radius: 20px;
        /* background: url('/images/webP/nodeimage_node1.webp'); */
        background-size: 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        cursor: pointer;
        transition: all 200ms ease-in-out;
    }
    .txt-gallery-title {
        font-size: 20px;
        align-self: center;
        margin-left: 0px;
        /* text-transform: uppercase; */
        letter-spacing: 1px;
    }

    
}

/*! ------------------- Gallery Section End ------------------------------- */




/*! ------------------------- Hotspots -------------------------------- */
.hotspot-containers {
    /* background-color: rgba(46, 55, 65, 0.215); */
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
}

.icon-hotspot-node {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 150;
    transition: all 200ms ease-in-out;
}
.icon-hotspot-node:hover {
    width: 35px;
    height: 35px;
}

.hotspot-line {
    background-color: var(--col-txt-primary);
    width: 3px;
    height: 50px;
    position: absolute;
    bottom: 6px;
    left: 50%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transform: translate(-50%, -50%) scaleY(0);
    transform-origin: bottom center;

    transition: all 150ms ease-out 480ms;
}
.icon-hotspot-node:hover ~ .hotspot-line {
    transform: translate(-50%, -50%) scaleY(1);
    transition: all 150ms ease-in;
}

.title-hotspot-node {
    background-color: var(--col-txt-primary);
    width: 0px;
    height: 40px;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 110;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90px);

    color: var(--col-txt-secondary);
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    white-space: nowrap;

    transition: all 200ms linear 290ms;
}
.icon-hotspot-node:hover ~ .title-hotspot-node {
    width: 200px;
    transition: all 250ms ease-out 140ms;
}

.hotspot-img-contain {
    /* background-color: blue; */
    width: 160px;
    height: 90px;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -170px);
}

.img-hotspot-node {
    background-color: red;
    /* background-image: url(); */
    width: 140px;
    height: 80px;
    border-radius: 10px 10px 0px 0px;
    outline: solid 4px var(--col-txt-primary);
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 88px);
    transform-origin: bottom center;
    background-size: cover;
    background-repeat: no-repeat;

    transition: all 300ms ease-in 0ms;
}
.icon-hotspot-node:hover ~ .hotspot-img-contain .img-hotspot-node {
    transform: translate(-50%, 0px);
    transition: all 350ms ease-out 390ms;
}


@media only screen and (min-width: 100px) and (max-width: 1023px) {
}

/*! --------------------- Hotspots End ---------------------------- */




/*! ---------------------- Info Popups ----------------------------- */
.info-container {
    /* background-color: var(--col-temp-background-box); */
    /* background-color: red; */
    width: calc(100vw - 60px);
    max-width: 840px;
    /* height: 560px; */
    max-height: calc(100vh - 160px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 50px)) scale(0);
    border-radius: 30px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
    /* display: none; */
}
.info-header-box {
    background-color: var(--col-heading-box);
    width: 100%;
    height: 60px;
    padding: 0px 30px;
    padding-top: 10px;
    

    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info-header {
    color: var(--col-txt-secondary);
    font-family: var(--font-headings);
    font-weight: var(--font-weight-regular);
    font-size: 32px;    
}
.info-exit-icon {
    background-image: url('/assets/icons/exit-icon.svg');
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 175;
}

.info-body-content {
    background-color: var(--col-overlay-strong);
    width: 100%;
    /* height: 100%; */
    max-height: calc(100vh - 220px);
    padding: 15px;
    overflow: scroll;
}
.info-text {
    display: inline-block;
    width: 55%;
    color: var(--col-txt-primary);
    font-family: var(--font-body);
    font-weight: var(--font-weight-extralight);
    font-size: 22px;
    padding: 15px;
}
.info-img {
    display: block !important;
    /* background-color: blue; */
    width: 45%;
    border-radius: 10px;
    object-fit: cover;
    /* padding: 15px; */
    margin: 15px;
}


@media only screen and (min-width: 100px) and (max-width: 1023px) {
    .info-container {
        width: calc(100vw - 20px);
    }

    .info-body-content {
        padding: 15px 30px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .info-text {
        width: 100%;
        font-size: 22px;
        padding: 0px;
        padding-bottom: 15px;
    }
    .info-img {
        width: 100%;
        /* height: inherit; */
        border-radius: 10px;
        object-fit: cover;
        /* padding: 15px; */
        margin: 0px;
    }

}


/*! ------------------- Info Popups End ------------------------- */



/*  ------ lARGER THAN FULL-HD 1920p --------- */
@media only screen and (min-width: 1921px) {
}
/* ---- Notebooks and Macbooks 1366x786 to 1440-900  */
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
}

/* ---- Ipads in landscape and small displays 1024px to 1200px  */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
}

/* --------- Mobile Breakpoint -------  */
@media only screen and (min-width: 100px) and (max-width: 1023px) {
}